<script>
var source = '/room-plan/bookings/feed?room_id=0';
//Render the initial calendar (with all rooms visible).
$(document).ready(function() {
    $('#calendar').fullCalendar({  
        			header: {
                                    left: 'prev,next today',
                                    center: 'title',
                                    right: 'month,basicWeek,basicDay'
                                },
                                displayEventEnd: {
                                    month: true,
                                    basicWeek:true,
                                    basicDay:true,
                                    'default': true
                                },
    eventClick: function(calEvent, jsEvent, view) {
        //redirect to the view.
        window.location.href='/room-plan/bookings/view/'+calEvent.id;
    }                                
                                
    });
    //Should be adapted to use the room in the drop down
//    $('#calendar').fullCalendar( 'addEventSource', "/room-plan/bookings/feed?room_id=0"+$('#room').val());
    $('#calendar').fullCalendar( 'addEventSource', source);
});

//If the Select is change set the event source and render the calendar again.
$(document).on('change','#room',function(){
    $('#calendar').fullCalendar( 'removeEventSource', source);    
    source = $('#room').val();    
    $('#calendar').fullCalendar( 'addEventSource', source);
});
</script>

<select id="room">
    <option value="/room-plan/bookings/feed?room_id=0">Alle</option>
    <?php 
        foreach($rooms as $room){
            echo('<option value="/room-plan/bookings/feed?room_id='.$room['Room']['id'].'">'.$room['Room']['name'].'</option>');            
        }
    ?>        
<select>
    
    
<div id="calendar"></div>